<template>
  <view class="shop-home">
    <view class="shop-header">
      <view class="shop-bar">
        <nut-avatar :url="shop.logo" size="48" />
        <view class="shop-bar-right">
          <view class="shop-bar-name">{{ shop.shop_name }}</view>
          <view class="shop-bar-sales"
            >店铺销量 <text class="pl-1">{{ shop.sales || '-' }}</text></view
          >
        </view>
      </view>
      <view class="shop-score">
        <view class="shop-score-item">
          <text class="score-name">商家服务</text>
          <view class="score-value">
            <text>{{ shop.shop_score }}分</text>
            <view class="score-text-icon">{{
              Number(shop.shop_score) >= 4.7 ? '高' : Number(shop.shop_score) >= 4.0 ? '中' : '低'
            }}</view>
          </view>
        </view>
        <view class="shop-score-item">
          <text class="score-name">商品体验</text>
          <view class="score-value">
            <text>{{ shop.shop_score }}分</text>
            <view class="score-text-icon">{{
              Number(shop.shop_score) >= 4.7 ? '高' : Number(shop.shop_score) >= 4.0 ? '中' : '低'
            }}</view>
          </view>
        </view>
        <view class="shop-score-item">
          <text class="score-name">物流体验</text>
          <view class="score-value">
            <text>{{ shop.shop_score }}分</text>
            <view class="score-text-icon">{{
              Number(shop.shop_score) >= 4.7 ? '高' : Number(shop.shop_score) >= 4.0 ? '中' : '低'
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <mark-card :title="`联盟商品(${shopProtoTotal || 0})`">
      <view v-if="protoListLoading">
        <nut-skeleton width="250px" height="15px" title animated avatar avatar-size="100px" row="3"></nut-skeleton>
        <nut-skeleton width="250px" height="15px" title animated avatar avatar-size="100px" row="3"></nut-skeleton>
        <nut-skeleton width="250px" height="15px" title animated avatar avatar-size="100px" row="3"></nut-skeleton>
      </view>
      <proto-list v-else :items="shopProtoItems" @item-click="handProtoClick" />
    </mark-card>
  </view>
</template>

<script setup lang="ts">
import './index.less';
import { ref } from 'vue';
import Taro, { useLoad } from '@tarojs/taro';
import * as url from 'url';
import { getProtoListApi, getShopIngoApi, ProtoType, ShopType } from '@/api/proto';
import ProtoList from '@/components/proto-list/index.vue';
import MarkCard from '@/components/mark-card/index.vue';

const shop = ref<ShopType>();
const shopProtoItems = ref<ProtoType[]>();
const shopProtoTotal = ref<ProtoType[]>();
const protoQuery = ref({
  page: 1,
  limit: 20,
  shop_id: null,
});
const handProtoClick = (item) => {
  Taro.navigateTo({ url: `/pages/proto/detail/index?id=${item.id}` });
};
const getShopProtoList = () => {
  if (!protoQuery.value.shop_id) {
    return;
  }
  getProtoListApi(protoQuery.value).then((res) => {
    shopProtoItems.value = res.result.items;
    shopProtoTotal.value = res.result.total;
  });
};
const protoListLoading = ref(false);
const getShopInfo = (id) => {
  if (!id) {
    return;
  }
  protoListLoading.value = true;
  getShopIngoApi({ id })
    .then((res) => {
      if (res.success) {
        shop.value = res.result;
        protoQuery.value.shop_id = shop.value.shop_id;
        getShopProtoList();
      }
    })
    .finally(() => {
      protoListLoading.value = false;
    });
};
useLoad(() => {
  const { id } = Taro.getCurrentInstance().router.params;
  getShopInfo(id);
});
</script>

<style lang="less" scoped></style>
